import { useState, useRef, useEffect } from "react";
import { message, Card, Button, Row, Col, Popconfirm } from "antd";
import useCommonTable from "@/hooks/useCommonTable";
import { DownloadOutlined } from "@ant-design/icons";
import "./index.less";
import { getInfo, getCurve, exportExcel } from "@/services/friction";
import { history } from "umi";
import ProForm, {
  ModalForm,
  ProFormSelect,
  ProFormText,
} from "@ant-design/pro-form";
import { type2Options, typeLHOptions, typeSCOptions } from "@/const";
import { downLoadFile } from "@/utils";
import CharData from "./components/CharData";

export default ({ action = true }) => {
  const { query } = history.location;
  const { id } = query;
  const formRef1 = useRef();
  const [visible, setVisible] = useState(false);
  const [showModal1, setShowModal1] = useState(false);
  const [dataList, setDataList] = useState([]);
  const [fitting, setFitting] = useState([]);

  const [list, setList] = useState([]);
  const formRef = useRef();

  const fetchInfo = async () => {
    const res = await getInfo({ id });
    if (res.data) {
      setList(res.data);
    }
  };

  useEffect(() => {
    if (id) {
      fetchInfo();
    }
  }, [id]);

  const columns = [
    {
      title: "rundate",
      dataIndex: "rundate",
    },
    {
      title: "foam type",
      dataIndex: "foamType",
    },
    {
      title: "stress @40%",
      dataIndex: "stressForty",
    },
    {
      title: "weight",
      dataIndex: "weight",
      // sorter: {
      //   compare: (a, b) => a.weight - b.weight,
      //   multiple: 3,
      // },
    },
    {
      title: "density",
      dataIndex: "density",
    },
    {
      title: "Modulus",
      dataIndex: "modulus",
    },
    {
      title: "compress strain",
      dataIndex: "compressStrain",
    },
    {
      title: "compress stress",
      dataIndex: "compressStress",
    },
    {
      title: "max axial force",
      dataIndex: "maxAxialForce",
    },
    {
      title: "ori_axial force",
      dataIndex: "oriAxialForce",
    },
    {
      title: "shear strain",
      dataIndex: "shearStrain",
    },
    {
      title: "shear stress",
      dataIndex: "shearStress",
    },
    {
      title: "max torque",
      dataIndex: "maxTorque",
    },
    {
      title: "cor_axial force",
      dataIndex: "corAxialForce",
    },
    {
      title: "coefficient",
      dataIndex: "coefficient",
    },
    {
      title: "溶胀质量",
      dataIndex: "swellingQuality",
    },
    {
      title: "溶胀率",
      dataIndex: "swellingRate",
    },
    {
      title: "干燥后质量",
      dataIndex: "qualityAfterDrying",
    },
    {
      title: "干燥后质量比",
      dataIndex: "qualityRatioAfterDrying",
    },
    {
      title: "Area",
      dataIndex: "area",
    },
  ];

  const xOptions = [
    // {
    //   label: "foam type",
    //   value: "foamType",
    // },
    {
      label: "stress @ 40%",
      value: "stressForty",
    },
    {
      label: "density",
      value: "density",
    },
    {
      label: "max axial force",
      value: "maxAxialForce",
    },
    {
      label: "溶胀率",
      value: "swellingRate",
    },
    {
      label: "Area",
      value: "area",
    },
  ];
  const yOptions = [
    {
      label: "max torque",
      value: "maxTorque",
    },
    {
      label: "coefficient",
      value: "coefficient",
    },
  ];

  return (
    <>
      {useCommonTable({
        dataSource: list,
        columns: columns,
        onlyColumns: true,
        actionColumnWidth: 160,
        modalWidth: 800,
        renderAdd: () => {},
        search: false,
        onlyAction: true,
        showCheckbox: false,
        pagination: false,
        scroll: {
          x: 1200,
        },
        renderLeftToolBar: (actionRef) => {
          return (
            <>
              <Button
                className="btn2"
                icon={<DownloadOutlined />}
                onClick={async () => {
                  const blob = await exportExcel({ frictionPerformanceId: id });
                  downLoadFile(blob, Date.now() + ".xlsx");
                }}
              >
                一键导出
              </Button>
              <Button
                style={{ marginLeft: 10 }}
                className="btn1"
                onClick={async () => {
                  setShowModal1(true);
                }}
              >
                图形展示
              </Button>
            </>
          );
        },
      })}

      <ModalForm
        formRef={formRef1}
        width={"80%"}
        style={{ height: 800, overflowY: "auto" }}
        visible={showModal1}
        title={"摩擦性能图形展示"}
        onVisibleChange={(bool) => {
          setDataList([]);
          setFitting([]);
          setShowModal1(bool);
        }}
        modalProps={{
          destroyOnClose: true,
        }}
        layout="vertical"
        submitter={{
          render: () => {},
        }}
      >
        <Row>
          <Col span={11}>
            <ProFormSelect
              label="X值"
              name="xarray"
              allowClear
              fieldProps={{
                mode: "multiple",
                options: xOptions,
              }}
              rules={[
                { required: true, message: "请选择" },
                {
                  validator: async (rule, value) => {
                    if (value?.length > 3) {
                      return Promise.reject("最多只能选择3个X轴");
                    }
                    return Promise.resolve();
                  },
                },
              ]}
            />
          </Col>
          <Col span={11}>
            <ProFormSelect
              label="Y值"
              name="yarray"
              allowClear
              fieldProps={{
                mode: "multiple",
                options: yOptions,
              }}
              rules={[{ required: true, message: "请选择" }]}
            />
          </Col>
          <Col>
            <Button
              style={{ marginTop: 30, marginLeft: 20 }}
              type="primary"
              onClick={async () => {
                setDataList([]);
                setFitting([]);
                const data = await formRef1.current?.validateFields();
                const res = await getCurve({
                  id: id,
                  xarray: data.xarray,
                  yarray: data.yarray,
                });
                setFitting(res.data?.fitting);
                setDataList(res.data?.curves);
              }}
            >
              确定
            </Button>
          </Col>
        </Row>

        <Row>
          {fitting?.map((item) => {
            return (
              <Col span={12} key={item}>
                <div
                  style={{ fontSize: 20, margin: 20 }}
                  dangerouslySetInnerHTML={{ __html: item }}
                ></div>
              </Col>
            );
          })}
        </Row>

        <div style={{ display: "flex" }}>
          {dataList.map((res) => {
            const tabList = res.map((item) => {
              return {
                function: item.formula,
                name: item.sourceList[0].series,
              };
            });
            return (
              <>
                <div style={{ flex: 1 }}>
                  <CharData value={res} />
                  <div
                    className="lh-function"
                    style={{ justifyContent: "center" }}
                  >
                    <div className="func-box">
                      {tabList.map((item) => (
                        <div className="func-item">
                          <div className="name">{item.name}</div>
                          <div
                            className="value"
                            dangerouslySetInnerHTML={{ __html: item.function }}
                          ></div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </>
            );
          })}
        </div>
      </ModalForm>
    </>
  );
};
